<script setup lang='ts'>

defineOptions({ name: 'AppWithdrawSelectAmount' })

interface Item {
  label: string
  value: number | string
}
interface Props {
  list: any[]
  modelValue: number | string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: ''
})

const emits = defineEmits<{
  (e: 'update:modelValue', val: number | string): void
  (e: 'change', val: number | string): void
  (e: 'blur'): void
}>()

function selectItem(val: number | string) {
  emits('update:modelValue', val)
  emits('change', val)
}

</script>

<template>
  <div class="grid grid-cols-4 gap-[.375rem]" v-if="list?.length">
    <div 
        class="h-[2rem] rounded-[.25rem] font-[700] flex justify-center items-center bg-bg-black-5 text-[.75rem] text-text-white-3 border border-transparent" 
        v-for="item in list" :key="item.value"
        @click="selectItem(item.value)"
        :class="[item.value === props.modelValue && '!border-brand']">{{ item.label }}</div>
  </div>
</template>
